<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1843591_bmlu6sdeav.css" />
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<link rel="stylesheet" type="text/css" href="./iconfont.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul{list-style: none;}
			.box1 {
				height: 45px;
				width: 60%;
				position: absolute;
			}
			
			#toggle {
				width: 50px;
				height: 50px;
				border-radius: 500px 500px;
				display: inline-block;
				margin-left: 30px;
				margin-top: 10px;
				background-color: lightslategrey;
				opacity: 0;
			}
			
			#toggle~span {
				width: 25px;
				height: 4px;
				background-color: darkgray;
				display: block;
				margin: 9px 12px;
				position: absolute;
			
			}
			
			.span {
				top: 14.5px;
				left: 30px;
			}
			
			.span2 {
				top: 24.5px;
				left: 30px;
			}
			
			.span3 {
				top: 34.5px;
				left: 30px;
			}
			
			.tu1 {
				margin: 13px 20px;
				width: 120px;
				height: 30px;
			}
			
			#boox {
				width: 200px;
				height: 20px;
				position: relative;
				top: -40px;
				left: 1100px;
			}
			
			#boox a {
				font-size: 10px;
				width: 100px;
				float: left;
				text-decoration: none;
				color: #000000;
			}
			
			.a1 {
				font-size: 35px;
				position: absolute;
				top: 90px;
				left: 650px;
				font-family: "宋体";
			}
			
			.aa p {
				width: 1px;
				height: 1px;
				background-color: #000000;
				display: none;
				border-radius: 500px 500px;
			}
			
			.input1 {
				width: 550px;
				height: 54px;
				border-radius: 500px 500px;
				position: relative;
				top: 670px;
				left: 680px;
				font-size: 15px;
			}
			
			.iconfont {
				font-size: 20px;
				position: relative;
			
				left: 645px;
			}
			.nb{
				position: absolute;
				margin-top: 100px;
				margin-left: 420px;
			}
			#box10{width: 100%;height: 100%;position: fixed;left: -100%;top: 0px;background-color: #FFFFFF;}
			#box10_div2{width: 100%;height: 350px;margin-top: 100px;}
			#box10_div2_div{width: 1280px;height: 50%;margin: 0 auto;}
			.box10_div2_ul1{width: 40%;height: 100%;float: left;margin-left: 100px;}
			.box10_div2_ul1 li{height: 100px;color: #333;font-size: 35px;font-weight: 400;margin: 0 auto;}
			.box10_div2_ul2{width: 40%;height: 100%;float: left;}
			.box10_div2_ul2 li{height: 100px;color: #333;font-size: 35px;font-weight: 400;margin: 0 auto;}
			.xz li p{width: 1px;height: 2px;background-color: #000000;border-radius: 500px 500px;}
			.list{width: 1280px;height: 30px;margin: 0 auto;margin-top: -50px;}
			.list li{float: left;}
			.list li a{text-decoration: none;color: #000000;}
			.list li a:hover{border-bottom: #000000 solid 1px;}
			#box10_div3{width: 854px;height: 74px;margin:0 auto ;margin-top: 65px;margin-right:-400px;}
			#box10_div3 ul li{border-bottom: #000000 solid 1px;width: 154px;}
			.li10{opacity: 0;}
			.li10:hover{background-color: #F8F8FF;}
		</style>
	</head>
	<body>
		<div style="background:url(./产品-Bellucci%20EVOO_files/home-1440x880.jpg); width: 100%;">
			<div class="nb">
				<h1>从根开始。永远新鲜。永远是意大利人。</h1>
			</div>
		 <div id="box" style="width: 100%;height: 820px;background-size:cover;background-position: center 0; background-repeat: no-repeat;">
			<div class="box1 qwqw">
				<a href="#" id="toggle"></a>
				<span class="span sspan"></span>
				<span class="span2 sspan"></span>
				<span class="span3 sspan"></span>
		
				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg">
				<div id="boox">
					<a class="aa" href="产品展示(1).html" style="width: 50px;">产品展示
						<p></p>
					</a>
					<a class="aa" href="获奖.html" style="width: 60px;margin-left: 20px;">商店定位器
						<p></p>
					</a>
					<a class="aa" href="联系我们.html" style="width: 30px;margin-left: 20px;">联系
						<p></p>
					</a>
				</div>
			</div>
			
		 </div>
		</div>
		<div id="box10">
			<div id="box10_div1">
				<span class="iconfont icon-chacha" style="font-size: 40px;position:absolute;top: 10px;left: 30px;"></span>
				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg" style="margin-left: 90px;">
			</div>
			<div id="box10_div2">
				<div id="box10_div2_div">
					<ul class="box10_div2_ul1 xz">
						<li style="width: 215px;">意大利是我家<p></p>
						</li>
						<li style="width: 245px;margin-left: 145px;">贝鲁奇应用程序<p></p>
						</li>
						<li style="width: 110px;margin-left: 145px;">嘿嘿嘿<p></p>
						</li>
					</ul>
					<ul class="box10_div2_ul2 xz">
						<li style="width: 180px;">完全可追溯<p></p>
						</li>
						<li style="width: 145px;margin-left: 166px;">到达食谱<p></p>
						</li>
					</ul>
				</div>
			</div>
			<img src="https://www.belluccipremium.com/uploads/seals/italy-flag.jpg" style="margin: 0 auto;display: block;">
			<ul class="list">
				<li style="width: 60px;margin-left: 535px;"><a href="#">联系</a></li>
				<li style="width: 110px;"><a href="#">商店定位器</a></li>
				<li style="width: 96px;"><a href="#">获奖情况</a></li>
			</ul>
			<div id="box10_div3">
				<img src="产品-Bellucci%20EVOO_files/bellucci-app-logo.png" style="width: 85px;height: 26px;margin-left: -260px;">
				<ul style="position: relative;left: 2px;top: -24px;">
					<!-- <li class="li10">意大利</li>
					<li class="li10">西班牙</li>
					<li class="li10">墨西哥</li> -->
					<li>美国</li>
				</ul>
			</div>
		</div>
		<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("li").hover(function() {
				$(this).children("p").show()
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			$(".aa").hover(function() {
				$(this).children("p").show()
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
			
			$("#toggle").click(function() {
			
				$("#box10").animate({
					"left": 0 + "%"
				}, 500)
			
			})
			
			$(".sspan").click(function() {
			
				$("#box10").animate({
					"left": 0 + "%"
				}, 500)
			
			})
			$(".iconfont").click(function() {
				$("#box10").animate({
					"left": -100 + "%"
				}, 500)
			})
		</script>
	</body>
	
</html>
